import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

export class Brief extends React.Component {


  render() {
    const {children, wrap,style} = this.props;

    let numberOfLines = {};

    if (wrap === false) {
      numberOfLines = {
        numberOfLines: 1,
      };
    }
    return (
      <View style={[styles.Brief]}>
        <Text style={[styles.BriefText, style]} {...numberOfLines}>
          {children}
        </Text>
      </View>
    );
  }
}

export default class ListItem extends React.Component {

  static Brief = Brief;

  static defaultProps = {
    multipleLine: false,
    wrap: false,//是否限制单行
  }

  render() {
    const {
      children,
      multipleLine,
      thumb,
      extra,
      arrow,
      style,
      onClick,
      onPressIn,
      onPressOut,
      wrap,
      disabled,
      align,
      ...restProps,
    } = this.props;

    let numberOfLines = {};
    if (wrap === false) {
      numberOfLines = {
        numberOfLines: 1,
      };
    }

    let underlayColor = {};

    if (!disabled && onClick) {
      underlayColor = {
        underlayColor: StyleSheet.flatten(styles.underlayColor).backgroundColor,
        activeOpacity: 0.5,
      }
    } else {
      underlayColor = {
        activeOpacity: 1,
      };
    }

    let alignStyle = {};
    if (align === 'top') {
      alignStyle = {
        alignItems: 'flex-start',
      };
    } else if (align === 'bottom') {
      alignStyle = {
        alignItems: 'flex-end',
      };
    }

    let contentDom;
    if (Array.isArray(children)) {
      const tempContentDom = [];
      children.forEach((el, index) => {
        if (React.isValidElement(el)) {
          tempContentDom.push(el);
        } else {
          tempContentDom.push(
            <Text
              style={[styles.Content]}
              {...numberOfLines}
              key={`${index}-children`}
            >
              {el}
            </Text>)
        }
      });
      contentDom = <View style={[styles.column]}>{tempContentDom}</View>;
    } else {
      if (children && React.isValidElement(children)) {
        contentDom = <View style={[styles.column]}>{children}</View>
      } else {
        contentDom = (
          <View style={[styles.column]}>
            <Text style={[styles.Content]} {...numberOfLines}>
              {children}
            </Text>
          </View>
        );
      }
    }

    let extraDom;
    if (extra) {
      extraDom = (
        <View style={[styles.column]}>
          <Text style={[styles.Extra]} {...numberOfLines}>
            {extra}
          </Text>
        </View>
      );
      if (React.isValidElement(extra)) {
        const extraChildren = (extra.props).children;
        if (Array.isArray(extraChildren)) {
          const tempExtraDom: any[] = [];
          extraChildren.forEach((el, index) => {
            if (typeof el === 'string') {
              tempExtraDom.push(
                <Text
                  {...numberOfLines}
                  style={[styles.Extra]}
                  key={`${index}-children`}
                >
                  {el}
                </Text>,
              );
            } else {
              tempExtraDom.push(el);
            }
          });
          extraDom = <View style={[styles.column]}>{tempExtraDom}</View>;
        } else {
          extraDom = extra;
        }
      }
    }

    const arrEnum = {
      horizontal: (
        <Image
          source={require('./images/arrow.png')}
          style={styles.Arrow}
        />
      ),
      down: (
        <Image
          source={require('./images/arrow-down.png')}
          style={styles.ArrowV}
        />
      ),
      up: (
        <Image
          source={require('./images/arrow-up.png')}
          style={styles.ArrowV}
        />
      ),
    };

    const itemView = (
      <View {...restProps} style={[styles.Item, style]}>
        {typeof thumb === 'string' ? (
          <Image
            source={{uri: thumb}}
            style={[styles.Thumb, multipleLine && styles.multipleThumb]}
          />
        ) : (
          thumb
        )}
        <View
          style={[
            styles.Line,
            multipleLine && styles.multipleLine,
            multipleLine && alignStyle,
          ]}>
          {contentDom}
          {extraDom}
          {arrow
            ? arrEnum[arrow] || <View style={styles.Arrow}/>
            : null}
        </View>
      </View>
    );

    return (
      <TouchableHighlight
        {...underlayColor}
        onPress={onClick ? onClick : undefined}
        onPressIn={onPressIn}
        onPressOut={onPressOut}
      >
        {itemView}
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  underlayColor: {
    backgroundColor: '#dddddd',
  },
  Content: {
    color: '#000000',
    fontSize: 17,
    textAlignVertical: 'center',
  },
  column: {
    flex: 1,
    flexDirection: 'column',
  },
  Item: {
    flexGrow: 1,
    alignItems: 'center',
    flexDirection: 'row',
    paddingLeft: 15,
    backgroundColor: '#ffffff',
  },
  Arrow: {
    width: 8,
    height: 13,
    marginLeft: 8,
    marginTop: 3,
  },
  ArrowV: {
    width: 13,
    height: 8,
    marginLeft: 8,
  },
  Line: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: 15,
    paddingVertical: 5,
    minHeight: 44,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#dddddd',
  },
  multipleLine: {
    paddingVertical: 6,
  },
  Extra: {
    color: '#888888',
    fontSize: 17,
    textAlign: 'right',
    textAlignVertical: 'center',
  },
  Brief: {
    minHeight: 10,
  },
  BriefText: {
    color: '#888888',
    fontSize: 15,
    paddingTop: 3,
    textAlignVertical: 'center',
  },
});
